<template>
    <div class="container">
        <div class="main">
            <div class="app-body">
                <div class="app-search">
                    <el-form :inline="true" class="demo-form-inline" v-model="form">
                        <el-form-item label="谈话人" style="width:200px">
                            <!-- <el-select v-model="form.teacherNumber" placeholder="请选择谈话人" clearable filterable
                                @change="changeTeacher">
                                <el-option v-for="item in teacherList" :key="item.id" :label="item.name"
                                    :value="item.teacherNumber" />
                            </el-select> -->
                            <el-input placeholder="请填写谈话人" v-model="form.teacherName"
                                @keyup.enter="searchEnter"></el-input>
                        </el-form-item>
                        <el-form-item label="谈话学科" style="width:220px">
                            <el-select v-model="form.subject" placeholder="请选择学科" clearable filterable
                                @change="changeSubject">
                                <el-option v-for="item in subjectList" :key="item.id" :label="item.name"
                                    :value="item.name" />
                            </el-select>
                        </el-form-item>
                        <el-form-item label="谈话日期" style="width:300px">
                            <el-config-provider :locale="locale">
                                <el-date-picker v-model="times" type="daterange" range-separator="To"
                                    start-placeholder="请选择日期" end-placeholder="请选择日期" />
                            </el-config-provider>
                        </el-form-item>
                        <el-form-item label="谈话年级" style="width:220px">
                            <el-select v-model="form.grade" placeholder="请选择年级" clearable filterable
                                @change="changeGrade">
                                <el-option v-for="item in grades" :key="item" :label="item" :value="item" />
                            </el-select>
                        </el-form-item>
                        <el-form-item label="被谈话学生" style="width:220px">
                            <!-- <el-select v-model="form.studentNumber" placeholder="请选择学生" clearable filterable
                                @change="changeStudent" :remote-method="remoteMethod" remote @clear="clearHandle">
                                <el-option v-for="item in studentList" :key="item.id" :label="item.name"
                                    :value="item.studentNumber" />
                            </el-select> -->
                            <el-input placeholder="请填写被谈话学生" v-model="form.studentName"
                                @keyup.enter="searchEnter"></el-input>
                        </el-form-item>

                        <el-form-item>
                            <el-button style="width: 60px;" type="primary" @click="getList">搜索</el-button>
                            <el-button style="width: 80px;" type="success" @click="exportHandle">导出报表</el-button>
                            <!-- <el-button type="success" @click="add">添加</el-button> -->
                        </el-form-item>
                    </el-form>
                </div>
                <el-table :data="list" border>
                    <el-table-column type="index" label="序号" width="100" />
                    <el-table-column prop="teacherName" label="谈话人" />
                    <el-table-column prop="subject" label="谈话学科" />
                    <el-table-column prop="conversationTime" label="谈话日期" />
                    <el-table-column prop="grade" label="谈话年级" />
                    <el-table-column prop="studentName" label="被谈话学生" />
                    <el-table-column label="操作" width="150">
                        <template style="display: block" #default="scope">
                            <el-button class="del_btn" type="danger" @click="delHandle(scope.row.id)">删除
                            </el-button>
                            <el-button class="edit_btn" type="danger" @click="print(scope.row.id)">下载
                            </el-button>
                        </template>
                    </el-table-column>
                    <template v-slot:empty>
                        <el-empty description="暂无数据"></el-empty>
                    </template>
                </el-table>
                <div style="margin-top: 10px">
                    <el-config-provider :locale="locale">
                        <el-pagination :total="total" :page-size="pageSize" :current-page="page"
                            :page-sizes="[2, 5, 10, 20, 30, 40, 50, 100]"
                            layout="total, sizes, prev, pager, next, jumper" @size-change="changePageSize"
                            @current-change="changeCurrentPage">
                        </el-pagination>
                    </el-config-provider>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import { ElConfigProvider, ElMessageBox, ElMessage, } from "element-plus";
import zhCn from "element-plus/lib/locale/lang/zh-cn";
import { httpService } from "@/utils/httpService";
import { ArrowDown } from "@element-plus/icons-vue";
import { getGradeIds } from "../utils/dateFormat"
import { formatTime } from "@/utils/dateFormat";


export default {
    name: "ArticleList",
    data() {
        return {
            list: [],
            pageSize: 10,
            page: 1,
            total: 0,
            inputValue: "",
            fullscreenLoading: false,
            form: {
                teacherName: "",
                teacherNumber: "",
                studentName: "",
                studentNumber: "",
                subject: "",
                grade: "",
                startTime: "",
                endTime: "",
            },
            times: [],
            grades: [],
            nowGrade: "",
            subjectList: [],
            nowSubject: "",
            teacherList: [],
            studentList: [],
        };
    },
    mounted() {
        this.grades = getGradeIds()
        this.getSubjects()
        this.getList()
        this.getTeacherList()
        this.getStudentList()
    },

    components: { ArrowDown, },
    setup() {
        return {
            locale: zhCn,
        };
    },
    methods: {
        searchEnter: function (e) {
            console.log(e);
            // 使用 which 和 keyCode 属性来解决兼容问题
            var keyCode = window.event ? e.keyCode : e.which;
            var val = e.target.value;
            if (keyCode == 13 && val) {
                this.getList();
            }
        },
        getTeacherList() {
            httpService(
                "/javaApi/baseTeacher/list/1/10000", {}, "get"
            ).then((data) => {
                if (data) {
                    this.teacherList = data.list
                }
            })
        },
        getStudentList() {
            httpService(
                "/javaApi/baseStudent/list/1/20", {
                name: this.form.studentName,
                studentNumber: this.form.studentNumber,
            }, "get"
            ).then((data) => {
                if (data) {
                    this.studentList = data.list
                }
            })
        },
        changeTeacher(value) {
            this.getList()
        },
        changeSubject(value) {
            this.getList()
        },
        changeGrade(value) {
            this.getList()
        },
        clearHandle(value) {
            if (!value) {
                this.form.studentName = ''
                this.form.studentNumber = ''
                this.getList()
                this.getStudentList()
            }
        },
        changeStudent(value) {
            const arr = this.studentList.filter(item => item.studentNumber == value)
            if (arr && arr.length > 0) {
                this.form.studentName = arr[0].name
                this.getList()
            }
        },
        remoteMethod(value) {
            if (value) {
                this.form.studentName = value
                this.getStudentList()
                console.log(value);
            } else {
                this.form.studentName = ""
                this.form.studentNumber = ""
            }
        },
        getSubjects() {
            httpService(
                "/javaApi/baseDepartment/list/1/100", { type: 3 }, "get"
            ).then((data) => {
                if (data) {
                    this.subjectList = data.list
                }
            })
        },
        getList() {
            httpService(
                "/javaApi/conversationRecords/list/" + this.page + "/" + this.pageSize, {
                grade: this.form.grade ? this.form.grade : "",
                subject: this.form.subject ? this.form.subject : "",
                teacherName: this.form.teacherName ? this.form.teacherName : "",
                teacherNumber: this.form.teacherNumber ? this.form.teacherNumber : "",
                studentName: this.form.studentName ? this.form.studentName : "",
                studentNumber: this.form.studentNumber ? this.form.studentNumber : "",
                startTime: this.form.startTime ? this.form.startTime : "",
                endTime: this.form.endTime ? this.form.endTime : "",
            }, "get"
            ).then((data) => {
                data.list.map(item => {
                    return item.conversationTime ? item.conversationTime = formatTime(new Date(item.conversationTime)) : item.conversationTime = ""
                })
                this.list = data.list
                this.total = data.total;

            });
        },
        // 每页记录数改变，size：回调参数，表示当前选中的“每页条数”
        changePageSize(size) {
            this.pageSize = size;
            this.getList();
        },

        // 改变页码，page：回调参数，表示当前选中的“页码”
        changeCurrentPage(page) {
            this.page = page;
            this.getList();
        },


        delHandle(id) {
            ElMessageBox.confirm("确定要删除本条记录吗？", "提醒", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(() => {
                    httpService("/javaApi/conversationRecords/deleteById", "id=" + id, "post").then(
                        (data) => {
                            if (data.code == 200) {
                                ElMessage.success("删除成功");
                                this.getList()
                            } else {
                                ElMessage.error("删除失败");
                            }
                        }
                    );
                })
                .catch(() => { });
        },

        exportHandle() {
            this.fullscreenLoading = false
            httpService("/javaApi/conversationRecords/exportExcel", {}, "get").then(
                (data) => {
                    this.fullscreenLoading = false
                    if (data.code == 200) {
                        ElMessage.success("导出成功");
                        window.open("http://192.168.9.20" + data.message, "_blank")
                        this.getList()
                    } else {
                        ElMessage.error("导出失败");
                    }
                }
            );
        },

        print(id) {
            httpService(`/javaApi/conversationRecords/exportPdf/${id}`, {}, "get").then(
                (data) => {
                    console.log(data);
                    window.open(data.object, '_blank');
                }
            );
        },

        downLoad(url) {
            window.open(url, "_blank")
        },

    },
};
</script>
<style scoped>
* {
    margin: 0;
    padding: 0;
}

.flex {
    display: flex;
    align-items: center;
}

.container {
    width: 100vw;
    height: 100vh;
    background-color: #fff;
}

.main {
    padding: 20px 25px;
    /* background-color: chocolate; */
}

.app-search {
    margin-bottom: 10px;
}

.el-form-item {
    margin-bottom: 10px;
}

.del_btn {
    background-color: transparent;
    color: #FF0000;
    border: none;
    outline: none;
    margin-right: 10px;
}

.edit_btn {
    background-color: transparent;
    color: #1C78D6;
    border: none;
    outline: none;
}

.el-select-dropdown__item {
    padding-left: 15px;
}
</style>




<!-- <template>
    <div class="container"> 
        <div class="main">
            <div class="title">育人导师制记录后台</div>
            <div class="header flex">
                <div class="header_l flex"> 
                    <div class="filterBtn">
                        <el-dropdown @command="selectHandle">
                            <div class="filterBox">
                                <p style="width: 70px;">按年级筛选</p><el-icon>
                                    <ArrowDown />
                                </el-icon>
                            </div>
                            <template #dropdown>
                                <el-dropdown-menu>
                                    <el-dropdown-item :command="item" v-for="item in grades">{{ item
                                        }}</el-dropdown-item>
                                </el-dropdown-menu>
                            </template>
                        </el-dropdown>
                    </div>
                    <div class="filterBtn">
                        <el-dropdown @command="selectHandle1">
                            <div class="filterBox">
                                <p style="width: 70px;">按学科筛选</p><el-icon>
                                    <ArrowDown />
                                </el-icon>
                            </div>
                            <template #dropdown>
                                <el-dropdown-menu>
                                    <el-dropdown-item :command="item.name" v-for="item in subjectList">{{
                            item.name }}</el-dropdown-item>
                                </el-dropdown-menu>
                            </template>
                        </el-dropdown>
                    </div>
                </div>
                <div class="header_r">
                    <div class="serachBox flex">
                        <div class="flex">
                            <p>学生姓名</p>
                        </div>
                        <input type="text" v-model="inputValue">
                        <button @click="getList">搜索</button>
                    </div>
                </div>
            </div>
            <div class="borderBox">
                <div class="btn_box flex"> 
                    <div style="cursor: pointer;" v-loading.fullscreen.lock="fullscreenLoading" @click="exportHandle">
                        <img src="../assets/images/EducationSystem_export.png">
                        <p>导出</p>
                    </div>
                </div>
                <div class="table_box">

                    <el-table :data="list" border style="width: 100%;" scrollTo :row-class-name="tableRowClassName"
                        :header-cell-style="headerCellStyle" :row-style="tableRowStyle" default-expand-all
                        highlight-current-row="false"> 
                        <el-table-column type="selection" width="55" :selectable="selectable" />
                        <el-table-column prop="name" label="详细信息" class-name="column-name" min-width="300px">
                            <template style="display: block" #default="scope">
                                <div class="imgBox">
                                    <div class="fileBox" v-for="item in scope.row.files" @click="downLoad(item.url)">
                                        <img v-if="['doc', 'docx', 'DOC', 'DOCX'].includes(item.icon)"
                                            src="../assets/images/EducationSystem_doc.png">
                                        <img v-if="['jpg', 'png', 'jpeg'].includes(item.icon)"
                                            src="../assets/images/EducationSystem_img.png">
                                        <p>{{ item.name }}</p>
                                    </div>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column prop="description" label="发起人" min-width="150px" class-name="column-class">
                            <template style="display: block" #default="scope">
                                <div class="person">发起人：<span class="pName">{{ scope.row.teacherName }}</span></div>
                                <div class="person">学科：<span class="pSubject">{{ scope.row.subject }}</span></div>
                            </template>
                        </el-table-column>
                        <el-table-column prop="grade" label="年级" min-width="150px" style="color: #333;"
                            class-name="column-class"></el-table-column>
                        <el-table-column prop="description" label="学生信息" min-width="150px" class-name="column-class">
                            <template style="display: block" #default="scope">
                                <div class="person">学生姓名：<span class="pName">{{ scope.row.studentName }}</span></div>
                                <div class="person">学科：<span class="pSubject">{{ scope.row.subject }}</span></div>
                            </template>
                        </el-table-column>

                        <el-table-column label="操作" fixed="right" min-width="170px" class-name="column-class">
                            <template style="display: block" #default="scope">
                                <div class="flex">
                                    <el-button class="del_btn" size="small" type="danger"
                                        @click="delHandle(scope.row.id)">删除
                                    </el-button>
                                    <el-button class="edit_btn" size="small" type="danger"
                                        @click="print(scope.row.id)">下载
                                    </el-button>
                                </div>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>

                <div style="margin-top: 10px" class="pageBox flex">
                    <el-config-provider :locale="locale">
                        <el-pagination :total="total" :current-page="page" :page-size="pageSize" background
                            layout="prev, pager, next, sizes" :page-sizes="[5, 10, 15, 20, 30, 40, 50, 100]"
                            @size-change="changePageSize" @current-change="changeCurrentPage" />
                        <div class="flex">
                            <p>第 {{ page }} 条</p>
                            <p>共 {{ total }} 条数据</p>
                        </div>
                    </el-config-provider>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import { ElConfigProvider, ElMessageBox, ElMessage, } from "element-plus";
import zhCn from "element-plus/lib/locale/lang/zh-cn";
import { httpService } from "@/utils/httpService";
import { ArrowDown } from "@element-plus/icons-vue";
import { getGradeIds } from "../utils/dateFormat"


export default {
    name: "ArticleList",
    data() {
        return {
            list: [],
            pageSize: 5,
            page: 1,
            total: 0,
            inputValue: "",
            fullscreenLoading: false,
            form: {
                appName: "",
                type: "",
            },
            grades: [],
            nowGrade: "",
            subjectList: [],
            nowSubject: "",
        };
    },
    mounted() {
        this.grades = getGradeIds()
        console.log(this.grades);
        this.getSubjects()
        this.getList()
    },

    components: { ArrowDown, },
    setup() {
        return {
            locale: zhCn,
        };
    },
    methods: {
        handle() {
            const a = this.files.sort((a, b) => {
                const extA = a.split('.').pop().toLowerCase();
                const extB = b.split('.').pop().toLowerCase();
                return extB.localeCompare(extA);
            });
            console.log(a);
        },
        tableRowClassName() {
            return ""
        },
        headerCellStyle() {
            return {
                background: '#f2f2f2',
                color: "#333333",
                fontSize: '14px',
                fontWeight: "500",
            };
        },
        selectHandle(value) {
            this.nowGrade = value
            this.getList()
        },
        selectHandle1(value) {
            this.nowSubject = value
            this.getList()
        },
        getSubjects() {
            httpService(
                "/javaApi/baseDepartment/list/1/100", { type: 3 }, "get"
            ).then((data) => {
                if (data) {
                    this.subjectList = data.list
                }
            })
        },
        getList() {
            httpService(
                "/javaApi/conversationRecords/list/" + this.page + "/" + this.pageSize, {
                studentName: this.inputValue,
                grade: this.nowGrade,
                subject: this.nowSubject
            }, "get"
            ).then((data) => {
                this.list = data.list.map(item => {
                    if (item.pdfAttachment) {
                        let files = item.pdfAttachment.split(",")
                        files.sort((a, b) => {
                            const extA = a.split('.').pop().toLowerCase();
                            const extB = b.split('.').pop().toLowerCase();
                            return extB.localeCompare(extA);
                        });
                        files = files.map(value => {
                            return {
                                name: value.split("_")[1],
                                icon: value.split(".")[1],
                                url: value,
                            }
                        })
                        return {
                            ...item,
                            files: files
                        }
                    }
                })
                console.log(this.list);
                // this.list = data.list;
                this.total = data.total;

            });
        },
        // 每页记录数改变，size：回调参数，表示当前选中的“每页条数”
        changePageSize(size) {
            this.pageSize = size;
            this.getList();
        },

        // 改变页码，page：回调参数，表示当前选中的“页码”
        changeCurrentPage(page) {
            this.page = page;
            this.getList();
        },
        editHandle(id) {
            this.$refs.addEducationSystem.flag = true
            this.$refs.addEducationSystem.getStudentList()
            this.$refs.addEducationSystem.queryById(id)
        },

        delHandle(id) {
            ElMessageBox.confirm("确定要删除本条记录吗？", "提醒", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(() => {
                    httpService("/javaApi/conversationRecords/deleteById", "id=" + id, "post").then(
                        (data) => {
                            if (data.code == 200) {
                                ElMessage.success("删除成功");
                                this.getList()
                            } else {
                                ElMessage.error("删除失败");
                            }
                        }
                    );
                })
                .catch(() => { });
        },

        exportHandle() {
            this.fullscreenLoading = false
            httpService("/javaApi/conversationRecords/exportExcel", {}, "get").then(
                (data) => {
                    this.fullscreenLoading = false
                    if (data.code == 200) {
                        ElMessage.success("导出成功");
                        window.open("http://192.168.9.20" + data.message, "_blank")
                        this.getList()
                    } else {
                        ElMessage.error("导出失败");
                    }
                }
            );
        },

        print(id) {
            httpService(`/javaApi/conversationRecords/exportPdf/${id}`, {}, "get").then(
                (data) => {
                    console.log(data);
                    window.open(data.object, '_blank'); 
                }
            );
        },

        downLoad(url) {  
            window.open(url, "_blank")
        },

    },
};
</script> 
<style scoped>
* {
    margin: 0;
    padding: 0;
}

.flex {
    display: flex;
    align-items: center;
}

.container {
    width: 100vw;
    height: calc(100vh - 10px);
    padding: 5px 0;
    background-color: #F5F6F8;
}

.main {
    width: 80%; 
    height: 100%;
    background-color: #fff;
    margin: 0 auto;
    padding: 0 15px;

}

.title {
    color: #333333;
    font-size: 20px;
    font-weight: bold;
    padding: 10px 0;
}

.header {
    justify-content: space-between;
}

.filterBtn {
    width: 139px;
    line-height: 42px;
    background-color: #EDF4FF;
    border-radius: 5px;
    margin-right: 21px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #007EFF;
    font-size: 16px; 
}

.filterBtn p {
    margin-right: 8px;
}

.serachBox {
    color: #666666;
    font-size: 14px;
    width: 333px;
    height: 36px;
    border: 1px solid #D0D0D0;
    box-sizing: border-box;
    border-radius: 20px;
}

.serachBox .flex {
    justify-content: center;
    border-right: 1px solid #D0D0D0;
    margin-right: 10px;
    padding: 0 5px 0 15px;
    color: #666666;
    cursor: pointer;
}

.serachBox input {
    height: calc(100% - 4px);
    border: none;
    outline: none;
    flex: 1;
}

.serachBox button {
    width: 59px;
    height: 30px;
    border-radius: 15px;
    border: none;
    background-color: #007EFF;
    color: #fff;
    font-size: 14px;
    margin-right: 2px;
}

.borderBox {
    height: calc(100% - 110px);
    margin-top: 8px;
    border: 1px solid #E5E5E5;
}

.btn_box {
    color: #666;
    font-size: 14px;
    line-height: 1;
    height: 45px;
    padding-left: 20px;
}

.btn_box div {
    margin-right: 30px;
    display: flex;
    align-items: center;
}

.btn_box img {
    width: 18px;
    height: 18px;
    margin-right: 3px;
}

.table_box {
    height: calc(100% - 98px);
    overflow-y: auto;
}

.edit_btn {
    width: 67px;
    height: 30px;
    background-color: #EFF1F6;
    border-radius: 5px;
    color: #1C78D6;
    border: none;
    outline: none;
}

.del_btn {
    width: 67px;
    height: 30px;
    background-color: #F6EFEF;
    border-radius: 5px;
    color: #D61C1C;
    border: none;
    outline: none;
}

.fileBox {
    width: 100%;
    height: 35px;
    background-color: #F4F7FA;
    margin-right: 10px;
    display: flex;
    align-items: center;
    color: #3B5999;
    font-size: 14px;
    margin-bottom: 5px;
    cursor: pointer;
}

.fileBox img {
    width: 24px;
    height: 25px;
    margin-left: 9px;
    margin-right: 9px;
}

.pageBox {
    background-color: #f6f6f6;
    padding: 5px 0;
    border-top: 1px solid #e7e7e7;
    border-radius: 0 0 5px 5px;
}

.el-pagination {
    margin-left: 10px;
}

.pageBox {
    justify-content: space-between;
}

.pageBox .flex {
    color: #666;
    font-size: 14px;
    margin-right: 10px;
}

.pageBox .flex p {
    color: #666;
    font-size: 14px;
    margin-right: 20px;
}

.imgBox {
    display: flex;
    flex-direction: column;
}

.person {
    color: #999999;
    font-size: 14px;
}

.person .pName {
    color: #007EFF;
    font-size: 14px;
}

.person .pSubject {
    color: #333333;
    font-size: 14px;
}

.filterBox {
    width: 130px;
    height: 40px;
    background-color: #EDF4FF;
    color: #007EFF;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    border: none;
    outline: none;
    cursor: pointer;
}

.el-dropdown-menu {
    width: 130px !important;
    text-align: center !important;
}
 
</style> -->